<template>
	<view class="content">
		<!-- 导航条 -->
		<u-navbar title="门诊推荐" safeAreaInsetTop placeholder fixed leftIcon=''></u-navbar>
		<!-- <view class="seach-nav">
			<img src="../../static/1677228019185.jpg" style='width: 90rpx;height: 60rpx;' alt="">
			<view class="" style="display: flex;align-items: center;margin-right: 20rpx;">
				<text style="font-size: 30rpx;margin:0 10rpx;">商丘市</text>
				<u-icon style='font-size: 24rpx;margin-top: 10rpx;' name="arrow-down"></u-icon>
			</view>
		</view> -->
		<image style="width: 100%;" class="logo" src="/static/1.jpg"></image>
		<u-search :focus='false' placeholder='请输入门诊名称' shape="square" :showAction="false"></u-search>
		<!-- 内容 -->
		<view class="content-list">
			<u-tabs :list="list1" @click="click" lineWidth='25'
				itemStyle="padding-left: 18px; padding-right: 18px; height: 34px;" :inactiveStyle="{color: '#fff',}"
				:activeStyle="{color: '#fff'}" lineColor='#fff'></u-tabs>
			<!-- <view class="tab-a" style="width: 100%;padding: 20rpx 30rpx;white-space: nowrap">
				<view :class="activeIndex == index?'active':''" class="tab-item" v-for="(item,index) in list"
					:key="index" @click="calssIndex(index)">
					{{item.name}}
				</view>
			</view> -->
			<view style="color: #fff;font-size: 32rpx;margin-top:30rpx;font-weight: bold;padding-left: 20rpx;">
				门诊机构
			</view>
			<view class="list" v-for="(item,index) in NodeList" :key='index'>
				<view class="list-top">
					<view class="list-img">
						<image style="width: 100%;height: 100%;" :src="item.img" mode="">
						</image>
					</view>
					<view class="list-name">
						<view class="list-name-title">
							{{item.hospitalName}}
						</view>
						<view class="list-address">
							<u-icon name="map" style='font-size: 24rpx;'></u-icon>
							<view class="list-address-title">
								{{item.address}}
							</view>
							<view class="list-address-distance" style="margin-left: 10rpx;">
								{{item.distance}}km
							</view>
						</view>
						<view class="list-project" :class="item.hospitalName.length>16?'':'list-project2'">
							<view class="list-project-top">
								<view class="list-project-top-name">
									{{item.name}}
								</view>
								<view class="list-project-top-price">
									￥{{item.price}}
								</view>
							</view>
							<view class="yuyue-btn" :class="item.hospitalName.length>16?'':'list-project-btn'"
								@click="goinfo">
								去预约
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 60rpx;background-color: transparent;">

			</view>
		</view>

	</view>
</template>

<script>
	import {
		getAbout,
	} from '@/api/index.js'
	import {
		baseUrl
	} from "@/common/https.js"
	export default {
		data() {
			return {
				title: 'Hello',
				list1: [{
					name: 'HPV疫苗',
				}, {
					name: '带状疱疹',
				}, {
					name: '流感疫苗'
				}, {
					name: '肺炎疫苗'
				}],
				activeIndex: 0,
				NodeList: [{
						img: '../../static/1677206905009.jpg',
						hospitalName: '龙子湖社区卫生服务中心',
						address: '河南省郑州市金水区郑东新区龙子湖街道',
						distance: '52',
						name: 'HPV9价疫苗（单针）',
						price: '1331.00',
					},
					{
						img: '../../static/1677206905009.jpg',
						hospitalName: '龙子湖社区卫生服务中心',
						address: '河南省郑州市金水区郑东新区龙子湖街道',
						distance: '52',
						name: 'HPV9价疫苗（单针）',
						price: '1331.00',
					},
					{
						img: '../../static/1677206905009.jpg',
						hospitalName: '龙子湖社区卫生服务中心',
						address: '河南省郑州市金水区郑东新区龙子湖街道',
						distance: '52',
						name: 'HPV9价疫苗（单针）',
						price: '1331.00',
					},
					{
						img: '../../static/1677206905009.jpg',
						hospitalName: '龙子湖社区卫生服务中心',
						address: '河南省郑州市金水区郑东新区龙子湖街道',
						distance: '52',
						name: 'HPV9价疫苗（单针）',
						price: '1331.00',
					},
					{
						img: '../../static/1677206905009.jpg',
						hospitalName: '龙子湖社区卫生服务中心',
						address: '河南省郑州市金水区郑东新区龙子湖街道',
						distance: '52',
						name: 'HPV9价疫苗（单针）',
						price: '1331.00',
					},
					{
						img: '../../static/1677206905009.jpg',
						hospitalName: '龙子湖社区卫生服务中心',
						address: '河南省郑州市金水区郑东新区龙子湖街道',
						distance: '52',
						name: 'HPV9价疫苗（单针）',
						price: '1331.00',
					},
					{
						img: '../../static/1677206905009.jpg',
						hospitalName: '龙子湖社区卫生服务中心',
						address: '河南省郑州市金水区郑东新区龙子湖街道',
						distance: '52',
						name: 'HPV9价疫苗（单针）',
						price: '1331.00',
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			getList(){
				getAbout().then(res=>{
					console.log(res);
					// res是返回值,如果返回层级不对,到common文件夹下的https下的 'result.data'修改返回层
				})
			},
			click(item) {
			},
			//跳转详情
			goinfo() {
				uni.navigateTo({
					url: '/pages/projectInfo/projectInfo'
				})
			}
		},
		onReachBottom() {
			console.log('---');
		}
	}
</script>

<style scoped>
	.content-list {
		width: 100%;
		background: -webkit-linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(#6B83FF, 30%, #B1BEFF, 60%, #E3E8FF);
	}

	.tab-item {
		border-radius: 16rpx;
		background: #B1BEFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 14px;
		padding: 10rpx 15rpx;
		margin-right: 10rpx;
	}

	.active {
		background-color: #fff;
		color: #6B83FF;
	}

	.tab-a {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		box-sizing: border-box;
	}

	.list {
		width: 95%;
		height: 340rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 25rpx;
		padding-bottom: 0;
		box-sizing: border-box;
	}

	.list-top {
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

	.list-img {
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		border-radius: 12rpx;
	}

	.list-name {
		width: 520rpx;
		height: 100%;
	}

	.list-name-title {
		max-height: 82rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		font-size: 32rpx;
	}

	.list-address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
	}

	.list-address-title {
		color: #ccc;
		font-size: 24rpx;
		width: 370rpx;
		/* flex: 1; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.list-address-distance {
		color: #ccc;
		font-size: 24rpx;
	}

	.list-project {
		width: 100%;
		height: 140rpx;
		margin-top: 26rpx;
		background-color: #F2FCF9;
		padding: 15rpx;
		box-sizing: border-box;
		border-radius: 14rpx;
	}

	.list-project2 {
		height: 175rpx !important;
	}

	.list-project-btn {
		margin-top: 44rpx !important;
	}

	.list-project-top {
		display: flex;
		justify-content: space-between;
	}

	.list-project-top-name {
		font-size: 32rpx;
	}

	.list-project-top-price {
		font-size: 26rpx;
		color: red;
	}

	.yuyue-btn {
		display: flex;
		width: 130rpx;
		height: 60rpx;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: #6B83FF;
		border-radius: 30rpx;
		font-size: 24rpx;
		float: right;
		margin-top: 14rpx;
	}

	.seach-nav {
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
</style>
